<template>
  <div class="target-detail">
    <el-drawer size="95%" :visible.sync="drawerVisible" :append-to-body="true" :before-close="closeSelf" direction="btt">
      <span slot="title" style="display: flex; justify-content: space-between;">
        <span>{{goalInfo.goalPeriodYear+'年'}}{{goalPeriodTime[goalInfo.goalPeriodTime]}}</span>
        <span style="cursor: pointer; font-size: 20px; border-right: 1px solid #CCC; margin-right: 30px; padding-right: 30px;" v-if="goalInfo.id && canEditGoal">
          <i class="el-icon-edit" @click="openAddOrEditTargetDrawer"></i>
          <i class="el-icon-delete" style="margin-left: 20px;" v-if="canDelGoal" @click="delGoal"></i>
        </span>
      </span>
      <div class="content" :style="{ 'height': documentClientHeight*0.95 + 'px' }">
        <div class="left">
          <div class="target-info">
            <div class="target-main">
              <div class="row title">{{goalInfo.goalName}}</div>
              <div class="row">
                <span class="level">{{goalTag[goalInfo.goalTag-1]}}</span>
                <span class="user" v-if="goalInfo.goalExecuteDepartmentName">{{goalInfo.goalExecuteDepartmentName}} {{goalInfo.goalPrincipalName}}</span>
              </div>
              <div class="row">
                <span>整体进度：</span>
                <el-progress :percentage="goalInfo.goalProgressPercent * 1 || 0" style="width: 230px;"></el-progress>
              </div>
              <div class="row">
                <span>当前状态：{{goalStatus[goalInfo.goalStatus-1]}}</span>
              </div>
              <div class="row">
                <span style="color: #909399;">目标内容：{{goalInfo.goalContent}}</span>
              </div>
              <div class="row" v-if="goalInfo.goalBelongName">
                <span class="aligning"><i class="el-icon-share"></i> 对齐关键结果：{{goalInfo.goalBelongName}}</span>
              </div>
            </div>
            <div style="width: 100%; height: 1px; background-color: #ccc; margin-bottom: 20px;"></div>
            <div class="kr-container">
              <div class="title">
                <span style="line-height: 38px;"><i class="el-icon-s-flag" style="color: #3296FA;"></i> 关键结果（KRs）或里程碑</span>
                <el-button type="text" @click="openAddOrEditKrDrawer(false, goalInfo.id, goalInfo.goalName)" v-if="canEditKr"><i class="el-icon-plus"></i> 添加关键结果或里程碑（KR）</el-button>
              </div>
              <div class="kr-content">
                <div class="kr-list">
                  <div class="target-item" v-for="item in goalInfo.krList" :key="item.id" @click="openAddOrEditKrDrawer(item.id)">
                    <div class="target-top">
                      <el-progress type="circle" :percentage="item.krProgressPercent * 1 || 0" :width="50" v-if="item.krDataType === '1'"></el-progress>
                      <!-- 占位 -->
                      <div v-if="item.krDataType !== '1'" style="width: 50px;"></div>
                      <div class="target-info">
                        <div class="target-main">
                          <div class="title"><div><span style="color: #409EFF; font-weight: bold; margin-right: 10px;">{{item.krDataType==='1' ? 'KR':'里程碑'}}</span>{{item.krName}}</div></div>
                          <div v-if="item.krDataType === '1'">
                            <span style="width: 80px; display: inline-block;">信心指数：</span>
                            <span v-for="confidence in item.confidenceEntities" :key="confidence.id">
                              <el-tooltip class="item" :content="confidence.confidenceRemark" placement="bottom" v-if="confidence.confidenceRemark">
                                <div slot="content" style="max-width: 200px;">{{confidence.confidenceRemark}}</div>
                                <span style="background: #E8E8E8;padding: 0 5px;margin-right: 5px; margin-bottom: 5px; display: inline-block;">{{confidence.confidenceIndex}}</span>
                              </el-tooltip>
                              <span style="background: #E8E8E8;padding: 0 5px;margin-right: 5px; margin-bottom: 5px; display: inline-block;" v-else>{{confidence.confidenceIndex}}</span>
                            </span>
                          </div>
                        </div>
                      </div>
                      <el-button class="kr-edit-icons" type="text" style="width: 100px; text-align: right; color: #909399;">
                        <i class="el-icon-refresh-right" @click.stop="showKrProcessUpdateDialog(item)" v-if="canEditKr && item.canUpdateProgress === '1' && item.krDataType === '1'"></i>
                        <i class="el-icon-chat-dot-square" @click.stop="krsDynamic(item)"></i>
                        <i class="el-icon-plus" @click.stop="showConfidenceDialog(item)" v-if="canEditKr && item.krDataType === '1'"></i>
                        <i :class="item.show ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" @click.stop="showKrsDynamic(item)"></i>
                      </el-button>
                    </div>
                    <div v-if="item.dynamicList && item.show && item.dynamicList.length>0">
                      <div class="kr-dynamic-wrapper">
                        <div class="kr-dynamic-content" v-for="(trend, trendIdx) in item.dynamicList" :key="trend.id" v-show="trendIdx < 3">
                          <div class="row-1 clearfix">
                            <div>{{trend.dynamicExecutiveName}} <span v-if="trend.dynamicDatatype === '1'">{{trend.dynamicPerformOperation}}</span></div>
                            <div><i class="el-icon-delete" @click="delDynamic(trend.id)" v-if="trend.dynamicExecutiveId === userInfo.dingId && trend.dynamicDatatype === '2'" style="margin-right:3px;"></i>{{trend.dynamicCreateTime}}</div>
                          </div>
                          <div class="row-2">
                            <span v-if="trend.dynamicDatatype === '1'">{{trend.dynamicContent}}</span>
                            <div v-if="trend.dynamicDatatype === '2' && trend.dynamicContent.length > 0" class="reply-trend">
                              <div class="tr2">{{trend.dynamicContent}}</div>
                            </div>
                          </div>
                          <div class="row-3">
                            <div class="fileitem" v-for="(file, idx) in trend.dynamicAttachment" :key="idx">
                              <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">
                              <span style="width: 90%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;" @click.stop="downloadFile(file.url, file.name)">{{file.name}}</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="title">记录（{{dynamicList.length}}）</div>
          <div class="dynamic-wrapper">
            <div class="content-wrapper" @click="replyRow = 1;">
              <div class="dynamic-item" v-for="trend in dynamicList" :key="trend.id">
                <div class="row-1 clearfix">
                  <div>{{trend.dynamicExecutiveName}} <span v-if="trend.dynamicDatatype === '1'">{{trend.dynamicPerformOperation}}</span></div>
                  <div><i class="el-icon-delete" @click.stop="delDynamic(trend.id)" v-if="trend.dynamicExecutiveId === userInfo.dingId && trend.dynamicDatatype === '2'" style="margin-right:3px;"></i>{{trend.dynamicCreateTime}}</div>
                </div>
                <div class="row-2">
                  <span v-if="trend.dynamicDatatype === '1'">
                    <span v-if="trend.dynamicAscription !== '1'">「{{trend.dynamicBelongName}}」</span>{{trend.dynamicContent}}
                  </span>
                  <div v-if="trend.dynamicDatatype === '2' && (trend.dynamicAscription === '1' && trend.dynamicContent.length > 0 || trend.dynamicAscription !== '1')" class="reply-trend">
                    <div class="tr1" v-if="trend.dynamicAscription !== '1'">{{trend.dynamicPerformOperation}}</div>
                    <div class="tr2">{{trend.dynamicContent}}</div>
                  </div>
                </div>
                <div class="row-3">
                  <div class="fileitem" v-for="(file, idx) in trend.dynamicAttachment" :key="idx">
                    <img style="width:16px;height:16px;position:relative;top:-2px;margin-right:2px;" :src="getPic(file.name)" alt="">
                    <span style="width: 90%;overflow:hidden;text-overflow: ellipsis;vertical-align:bottom;white-space:nowrap;display:inline-block;" @click.stop="downloadFile(file.url, file.name)">{{file.name}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="dynamic-bottom clearfix">
              <at-ta style="width: 100%;" :members="members" name-key="name">
                <el-input
                type="textarea"
                :rows="replyRow"
                resize="none"
                @focus="replyRow = 4"
                placeholder="请输入评论内容"
                style="margin-bottom:5px;"
                v-model="dynamic.dynamicContent">
              </el-input>
              </at-ta>
              <input ref="uploadInput" style="display:none;" type="file" @change="uploadFile($event, dynamic.dynamicAttachment)" multiple="multiple">
              <span v-if="replyRow === 4" style="display: inline-block;" class="addfilebtn" @click="$refs.uploadInput.click()"><i class="el-icon-paperclip"></i>添加附件</span>
              <span v-if="replyRow === 4" style="display: inline-block;margin-right: 10px; float:right; color: #409EFF;" @click="submitDynamic" class="addfilebtn">发送</span>
              <div class="fileitem" style="width: 100%;" v-for="(file, idx) in dynamic.dynamicAttachment" :key="idx">
                <span style="cursor: pointer;">{{file.name}}</span>
                <span class="uploadtip" v-if="file.url" @click="delFile(idx, dynamic.dynamicAttachment)"><i class="el-icon-delete"></i></span>
                <span class="uploadtip" style="color: red;cursor:none;" v-if="!file.url">上传中<i class="el-icon-loading"></i></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-dialog :title="'添加信心指数'" :visible.sync="confidenceDialogVisible" width="800px" :append-to-body="true">
      <span slot="title" style="display: flex; justify-content: space-between; line-height: 24px; font-size: 18px; color: #72767b;">
        <span>添加信心指数</span>
      </span>
      <div class="add-confidence">
        <el-form label-width="100px" :label-position="'left'">
          <el-form-item label="信心指数">
            <el-slider v-model="confidence.confidenceIndex" style="width: 350px;" show-input :min="0" :max="10"></el-slider>
          </el-form-item>
          <el-form-item label="信心指数留言">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入信心指数留言" v-model="confidence.confidenceRemark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="submitConfidence">保存</el-button>
            <el-button size="mini" @click="confidenceDialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog :title="'更新关键结果进度'" :visible.sync="krProcessUpdateDialogVisible" width="800px" :append-to-body="true">
      <span slot="title" style="display: flex; justify-content: space-between; line-height: 24px; font-size: 18px; color: #72767b;">
        <span>更新关键结果进度</span>
      </span>
      <div class="kr-process-update">
        <el-form label-width="100px" :label-position="'left'">
          <el-form-item label="关键结果名称">
            <el-input v-model="krProcessUpdate.krName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="关键结果进度">
            <el-slider v-model="krProcessUpdate.krProgressPercent" style="width: 350px;" show-input></el-slider>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="submitKrProcess">保存</el-button>
            <el-button size="mini" @click="krProcessUpdateDialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dingMixin from "@/mixins/ding";
import formUtil from "@/utils/formUtil";
import {dateUtil} from '@/utils/dateUtil'
import AtTa from 'vue-at/dist/vue-at-textarea'

export default {
  data () {
    return {
      goalTag: ['公司级','部门级','团队级'],
      goalStatus: ['拟定状态','执行状态','完成状态'],
      goalPeriodTime: {
        '0201': '第1季度LRK',
        '0202': '第2季度LRK',
        '0203': '第3季度LRK',
        '0204': '第4季度LRK',
        '0200': '年度LRK',
      },
      goalInfo: {},
      confidence: {
        confidenceBelongId: '',
        confidenceBelongName: '',
        confidenceIndex: 0,
        confidenceRemark: '',
        confidencePeriodYear: '',
        confidencePeriodTime: ''
      },
      confidenceDialogVisible: false,
      dynamicList: [],
      dynamic: {
        dynamicBelongId: '',
        dynamicBelongName: '',
        dynamicContent: '',
        dynamicAttachment: [],
        dynamicAscription: '',
        dynamicDatatype: '2'
      },
      replyRow: 1,
      members: [],
      krProcessUpdateDialogVisible: false,
      krProcessUpdate: {
        id: '',
        krName: '',
        krProgressPercent: 0
      },
      curDynamicContent: '',
      canDelGoal: true
    };
  },
  props: ["drawerVisible","refresh", "userAsd", "documentClientHeight"],
  components: {
    AtTa
  },
  mixins: [dingMixin],
  computed: {
    canEditGoal() {
      return this.userAsd.userLevel === '1' || ( this.userAsd.userLevel === '2' && this.goalInfo.hasGoalAuthority === '1')
    },
    canEditKr() {
      return this.goalInfo.hasKrAuthority === '1'
    },
    canViewDynamic() {
      return this.userAsd.userLevel === '1' || ( this.userAsd.userLevel === '2' &&  this.goalInfo.goalStatus != '1' )
    }
  },
  mounted () {
    
  },
  watch: {
    refresh() {
      if(this.refresh) {
        this.init(this.goalInfo.id)
        this.$emit("hasRefreshed")
      }
    }
  },
  methods: {
    closeSelf() {
      this.$emit("closeTargetDetail");
    },
    async init(id) {
      this.canDelGoal = true;
      if (id) {
        this.goalInfo = await this.$httpN.postB('lkr/goal/info', {id: id})
        this.goalInfo.krList.forEach(kr => {
          if(kr.canUpdateProgress !== '1') this.canDelGoal = false
        })
        this.goalInfo.goalStatus === '1' ? this.members = await this.$httpN.postB('lkr/lkrdynamic/getAtUser', {id: id}, false) : this.loadMembers().then(data=>this.members = data);
        this.getDynamicList();
        this.replyRow = 1;
        formUtil.resetData(this.dynamic);
      }
    },
    async delGoal() {
      formUtil.submitConfirm('您确定要删除目标吗', async ()=> {
        if(!await this.$httpN.postB('lkr/goal/goalDelete',{id: this.goalInfo.id})) return;
        formUtil.submitSuccess('删除成功');
        this.closeSelf();
        this.$emit('reload');
      })
    },
    openAddOrEditTargetDrawer() {
      this.$emit("openAddOrEditTargetDrawer", this.goalInfo.id)
    },
    openAddOrEditKrDrawer(krId, goalId, goalName) {
      this.$emit("openAddOrEditKrDrawer", krId, goalId, goalName)
    },
    getYearWeek(endDate) {
      //本年的第一天
      let beginDate = new Date(endDate.getFullYear(), 0, 1);
      //星期从0-6,0代表星期天，6代表星期六
      let endWeek = endDate.getDay();
      if (endWeek == 0) endWeek = 7;
      let beginWeek = beginDate.getDay();
      if (beginWeek == 0) beginWeek = 7;
      //计算两个日期的天数差
      let millisDiff = endDate.getTime() - beginDate.getTime();
      let dayDiff = Math.floor(( millisDiff + (beginWeek - endWeek) * (24 * 60 * 60 * 1000)) / 86400000);
      return Math.ceil(dayDiff / 7) + 1;
    },
    showConfidenceDialog(krData) {
      let date=new Date();
      let year = date.getFullYear();
      let week = this.getYearWeek(date);
      if(krData.confidenceEntities.length > 0) {
        let lastConfidence = krData.confidenceEntities[0];
        if(Number(lastConfidence.confidencePeriodYear) > year || Number(lastConfidence.confidencePeriodYear) === year && Number(lastConfidence.confidencePeriodTime.substr(2,4)) >= week) return this.$message.error('本周已添加信心指数，请下周再添加')
      }
      this.confidenceDialogVisible = true;
      formUtil.resetData(this.confidence);
      this.confidence.confidenceBelongId = krData.id;
      this.confidence.confidenceBelongName = krData.krName;
      this.confidence.confidencePeriodYear = year+'';
      this.confidence.confidencePeriodTime = '00'+week;
    },
    async submitConfidence() {
      // if(!this.confidence.confidenceRemark) return this.$message.error('请输入信心指数留言');
      if (!await this.$httpN.postB('lkr/confidence/confidenceSave', this.confidence) ) return
      formUtil.submitSuccess('保存成功');
      this.confidenceDialogVisible = false;
      this.init(this.goalInfo.id);
      this.$emit('reload');
    },
    krsDynamic(data) {
      const h = this.$createElement;
      this.curDynamicContent = '';
      if(document.getElementById("dynamicContent")) document.getElementById("dynamicContent").value = '';
      this.$msgbox({
        title: '评论',
        message: h('div', null, [
          h('textarea', {
            attrs: { class: 'el-textarea__inner', value: this.curDynamicContent, id:"dynamicContent", rows: 4, placeholder: "请输入评论内容"},
          })
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          this.curDynamicContent = document.getElementById("dynamicContent").value
          if (action === 'confirm') {
            if(!this.curDynamicContent) return this.$message.error("请输入评论内容后提交");
            this.submitKrDynamic(data);
            done();
          } else {
            done();
          }
        }
      })
    },
    async submitKrDynamic(data) {
      if(!await this.$httpN.postB('lkr/lkrdynamic/dynamicSave', {
        dynamicBelongId: data.id,
        dynamicBelongName: data.krName,
        dynamicContent: this.curDynamicContent,
        dynamicAttachment: [],
        dynamicAscription: data.krDataType === '1' ? '2' : '3'
      })) return
      formUtil.submitSuccess('评论成功');
      this.init(this.goalInfo.id);
    },
    async getDynamicList() {
      let {list} = await this.$httpN.postB('lkr/lkrdynamic/dynamicList', {dynamicBelongId: this.goalInfo.id, limit: 999, dynamicAscription: 1})
      list.forEach(item => {
        item.dynamicAttachment ? item.dynamicAttachment = JSON.parse(item.dynamicAttachment) : item.dynamicAttachment = [];
      })
      // this.canViewDynamic ? this.dynamicList = list : this.dynamicList = list.filter(item => item.dynamicDatatype==='1')
      this.dynamicList = list;
    },
    async uploadFile(e, target) {
      var files = e.target.files;
      var $this = this;
      Object.keys(files).forEach(function(key){
        var file = files[key];
        if(file.size / 1024 / 1024 > 20) return $this.$message.error('上传单个文件大小不能超过20MB!请压缩文件')
        var formData = new FormData();
        formData.append("file", file);
        formData.append("name", 'file');
        let newfile = {
          name: file.name,
          url: '',
          size: file.size,
          uploader: $this.userInfo.realName,
          time: dateUtil.thisDay()
        }
        target.push(newfile)
        $this.$httpN.upload('fileUpload', formData).then(res => {
          if(res.data.code === 0) {
            newfile.url = res.data.url;;
          }else if(res.data.code === 500) {
            $this.$message.error(res.data.msg)
            target.pop();
          }
        })
      })
      e.target.value = ''
    },
    delFile(idx,target){
      target.splice(idx, 1)
    },
    async submitDynamic() {
      if (this.dynamic.dynamicContent === '' && this.dynamic.dynamicAttachment.length === 0) return this.$message.error("请输入评论内容或添加附件后提交");
      if(this.dynamic.dynamicAttachment.filter(item => !item.url).length > 0) return this.$message.error('附件正在上传，请稍候……');
      this.dynamic.dynamicBelongId = this.goalInfo.id;
      this.dynamic.dynamicBelongName = this.goalInfo.goalName;
      this.dynamic.dynamicAscription = '1';

      if(! await this.$httpN.postB('lkr/lkrdynamic/dynamicSave', this.dynamic)) return 
      formUtil.submitSuccess('评论成功');
      this.init(this.goalInfo.id);
      formUtil.resetData(this.dynamic);
      this.replyRow = 1;
    },
    async delDynamic(id) {
      formUtil.submitConfirm('您确定要删除该条评论吗', async ()=> {
        if(!await this.$httpN.postB('lkr/lkrdynamic/delete',{id: id})) return;
        formUtil.submitSuccess('删除成功');
        this.init(this.goalInfo.id);
        formUtil.resetData(this.dynamic);
        this.replyRow = 1;
      })
    },
    showKrProcessUpdateDialog(data) {
      this.krProcessUpdateDialogVisible = true;
      this.krProcessUpdate.id = data.id;
      this.krProcessUpdate.krName = data.krName;
      this.krProcessUpdate.krProgressPercent = Number(data.krProgressPercent);
    },
    async submitKrProcess() {
      if(!await this.$httpN.postB('lkr/kr/krProcessUpdate', {
        id: this.krProcessUpdate.id,
        krProgressPercent: this.krProcessUpdate.krProgressPercent.toString()
      })) return
      formUtil.submitSuccess('更新成功');
      this.init(this.goalInfo.id);
      this.$emit('reload');
      this.krProcessUpdateDialogVisible = false;
    },
    downloadFile: function (url, fileName) {//跨域文件路径、下载到本地的文件名
      if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(url)) return this.dingPreviewPic(url);
      if(!url) return;
      var x = new XMLHttpRequest();
      x.open("GET", url, true);
      x.responseType = 'blob';
      x.onload=function(e) {
        var url = window.URL.createObjectURL(x.response)
        var a = document.createElement('a');
        a.href = url
        a.download = fileName;
        a.click()
      }
      x.send();
    },
    getPic(filename) {
      if(filename) {
        if(/\.(bmp|gif|jpg|pic|png|tif|jpeg)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438103037435905.png'
        }else if(/\.(txt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438530785140737.png'
        }else if(/\.(xls|xlsx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276438725690253314.png'
        }else if(/\.(doc|docx)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439195636850689.png'
        }else if(/\.(psd)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276439984203751426.png'
        }else if(/\.(pdf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440139145535490.png'
        }else if(/\.(ppt|pptx|dps|dpt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276440657859305473.png'
        }else if(/\.(rar|zip|arj|gz)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442063039193090.png'
        }else if(/\.(html|htm)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442135319633921.png'
        }else if(/\.(dwg|bak|dwt)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276441741667459074.png'
        }else if(/\.(wav|aif|au|mp3|ram|wma|mmf)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442006684524546.png'
        }else if(/\.(avi|mov|rmvb|rm|flv|mp4)$/.test(filename)){
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276442233483124737.png'
        }else{
          return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
        }
      }else {
        return 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/1276436590181343234.png'
      }
    },
    showKrsDynamic(kr) {
      typeof kr.show === 'undefined' ? this.$set(kr, 'show', true) : kr.show = !kr.show
      this.getKrsDynamicList(kr)
    },
    async getKrsDynamicList(kr) {
      let {list} = await this.$httpN.postB('lkr/lkrdynamic/dynamicList', {dynamicBelongId: kr.id, limit: 999, dynamicAscription: kr.krDataType === '1' ? '2' : '3'})
      list.forEach(item => {
        item.dynamicAttachment ? item.dynamicAttachment = JSON.parse(item.dynamicAttachment) : item.dynamicAttachment = [];
      })
      // this.canViewDynamic ? this.$set(kr, 'dynamicList', list) : this.$set(kr, 'dynamicList', list.filter(item => item.dynamicDatatype==='1'))
      this.$set(kr, 'dynamicList', list);
    }
  }
}
</script>

<style lang='scss' scoped>
.content-wrapper::-webkit-scrollbar, .content >.left::-webkit-scrollbar {/*滚动条整体样式*/
  width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
  scrollbar-arrow-color:red;
}
.content-wrapper::-webkit-scrollbar-thumb, .content >.left::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px #DEDEDE;
  background: rgba(0,0,0,0.2);
  scrollbar-arrow-color:red;
}
.content-wrapper::-webkit-scrollbar-track, .content >.left::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #F5F5F5;
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}
.target-detail {
  height: 100%;
}
.content {
  background-color: #F7F7F7;
  display: flex;
  .left {
    width: 50%;
    padding: 30px 40px;
    position: relative;
    height: 100%;
    overflow-y: auto;
    .target-info {
      margin: 0 30px;
      .target-main {
        .row {
          display: flex;
          margin-bottom: 20px;
          span {
            margin-right: 10px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
        .title {
          font-size: 16px;
        }
        .level {
          background-color: #E8EEF6;
          color: #3296FA;
          border: 1px solid #3296FA;
          padding: 4px 8px;
          border-radius: 20px;
          display: inline-block;
        }
        .user {
          display: inline-block;
          padding: 4px 8px;
          border: 1px solid #ECECEC;
          border-radius: 20px;
        }
        .aligning {
          background-color: #EEEEEE;
          padding: 8px 10px;
          color: #909399;
        }
      }
      .kr-container {
        .title {
          display: flex;
          justify-content: space-between;
        }
        .kr-content {
          background-color: #FFF;
          box-shadow: 0 3px 4px #cccccc;
          margin-bottom: 20px;
          .kr-list {
            .target-item {
              width: 100%;
              padding: 0 50px;
              cursor: pointer;
              .target-top {
                position: relative;
                width: 100%;
                padding: 30px 0;
                display: flex;
                border-bottom: 1px solid #E6E6E6;
                .target-info {
                  width: calc(100% - 110px);
                  display: flex;
                  .target-main {
                    width: 100%;
                    .title {
                      font-size: 16px;
                      margin-bottom: 10px;
                    }
                  }
                }
                .kr-edit-icons {
                  i {
                    padding: 3px;
                    border: 1px solid #E9E9EA;
                  }
                }
                /deep/ .el-progress__text {
                  top: 25px;
                }
              }
              .kr-dynamic-wrapper {
                border-bottom: 1px solid #E6E6E6;
                .kr-dynamic-content {
                  padding: 15px 0;
                  border-bottom: 1px dashed #E6E6E6;
                  &:last-child {
                    border-bottom: none;
                  }
                  .row-1{
                    color: #909399;
                    >div:first-child{
                      float:left;
                    }
                    >div:last-child{
                      float:right;
                    }
                  }
                  .row-2{
                    margin-top: 5px;
                    font-weight: normal;
                    .reply-trend{
                      display: inline-block;
                      padding: 6px 10px;
                      background: #C9E6FF;
                      border: 1px solid #A5CFF3;
                      font-weight: normal;
                      border-radius: 0 5px 5px;
                      .tr1{
                        border-bottom: 1px solid #C3DFF7;
                        padding-bottom:5px;
                        margin-bottom: 5px;
                      }
                    }
                  }
                  .row-3{
                    margin-top: 10px;
                  }
                  .fileitem{
                    line-height: 32px;
                    margin-bottom: 5px;
                    background: white;
                    padding-left:10px;
                    font-size: 12px;
                    color: #606266;
                    .uploadtip{
                      float:right;
                      margin-right: 20px;
                      cursor: pointer;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .right {
    width: 50%;
    position: relative;
    padding: 30px;
    border-left: 1px solid #E6E6E6;
    height: 100%;
    .title {
      height: 30px;
      line-height: 30px;
      margin-bottom: 20px;
    }
    .dynamic-wrapper {
      position: relative;
      height: calc(100% - 50px);
      .content-wrapper {
        height: calc(100% - 50px);
        padding-bottom: 120px;
        overflow-y: auto;
        .dynamic-item {
          margin-bottom: 30px;
          padding-right: 10px;
          .row-1{
            color: #909399;
            >div:first-child{
              float:left;
            }
            >div:last-child{
              float:right;
            }
          }
          .row-2{
            margin-top: 5px;
            font-weight: normal;
            .reply-trend{
              display: inline-block;
              padding: 6px 10px;
              background: #C9E6FF;
              border: 1px solid #A5CFF3;
              font-weight: normal;
              border-radius: 0 5px 5px;
              .tr1{
                border-bottom: 1px solid #C3DFF7;
                padding-bottom:5px;
                margin-bottom: 5px;
              }
            }
          }
          .row-3{
            margin-top: 10px;
          }
          .fileitem{
            line-height: 32px;
            margin-bottom: 5px;
            background: white;
            padding-left:10px;
            font-size: 12px;
            color: #606266;
            cursor: pointer;
          }
          .dynamic-content {
            padding: 15px 10px;
            background-color: #C9E6FF;
            display: inline-block;
            margin-top: 5px;
            border: 1px solid #A5CFF3;
            border-top-right-radius: 15px;
            border-bottom-left-radius: 15px;
          }
        }
      }
      .dynamic-bottom{
        position: fixed;
        bottom: 0;
        border-top: 1px solid #DEDEDE;
        width: calc(50% - 60px);
        background-color: #F7F7F7;
        padding: 10px;
        z-index: 4;
        .addfilebtn{
          line-height: 22px;
          cursor: pointer;
          color: #909399;
          display: block;
          margin-bottom:5px;
        }
        .fileitem{
          line-height: 32px;
          margin-bottom: 5px;
          background: #FFF;
          width: 474px;
          padding-left:15px;
          font-size: 12px;
          .uploadtip{
            float:right;
            margin-right: 20px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.el-dialog__wrapper {
  /deep/.el-dialog__header {
    padding: 15px;
    box-shadow: 0 3px 4px #cccccc;
  }
  /deep/.el-dialog__body {
    padding: 0;
    .add-kr {
      width: 100%;
      max-height: 500px;
      overflow-y: auto;
      .add-kr-item {
        border-bottom: 1px solid #E6E6E6;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        min-height: 50px;
      }
      .el-form-item {
        border-bottom: 1px solid #E6E6E6;
        margin-bottom: 0;
        padding: 0 15px;
        &:last-child {
          border-bottom: none;
          padding: 20px 15px;
        }
      }
      .el-date-editor {
        height: 50px;
        line-height: 50px;
      }
    }
    .add-confidence, .kr-process-update {
      padding: 30px;
    }
  }
}
</style>